<template>
  <div class='box'>
   <van-button v-if="this.goods.length==0" type='warning' class="mss" @click="golist">购物车空空如也，并点击去逛逛进入商品列表</van-button> 
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-swipe-cell v-for="item in shopgoods" :key="item.id">
        <van-card :title="item.title" :thumb="item.thumb_path">
          <div slot="desc" class="carddes">
            <span class="cp">￥{{item.sell_price}}</span>
            <span class="cc">x {{item.cou}}</span>
          </div>
          <div slot="footer">
            <van-stepper @change="changecou(item)" v-model="item.cou" integer/>
          </div>
        </van-card>
        <van-button slot="right" square text="删除" type="danger" @click="deleteg(item.id)"  class="delete-button"/>

      </van-swipe-cell>

      <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit"/>
    </van-pull-refresh>
  </div>
</template>
           
<script>
import { shopcarget } from "@/api";
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      shopgoods: [],
      isLoading: false
    };
  },
  methods: {
    ... mapMutations(['delgoods']),
    async getshop() {
      if (this.ids.length == 0) {
        return this.shopgoods=[]
      }
      var res = await shopcarget(this.ids);
      this.shopgoods = res.data.message;
      this.shopgoods = this.addarr(this.shopgoods, this.goods);
    },
    addarr(arr1, arr2) {
      arr1.map(x => {
        var i = arr2.findIndex(item => {
          return item.id == x.id;
        });
      if (i != -1) {
          x = Object.assign(x, arr2[i]);
        }
      });
      return arr1;
    },
    changecou(item) {
      this.$store.commit("changegoods", item);
    },
    onSubmit() {},
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 500);
    },
    deleteg(id){ 
       this.delgoods(id)
       this.getshop()
    },
    golist(){
       this.$router.push({path:`/shopping`})
    }
  },
  created() {
    this.getshop();
  },
  computed: {
    ...mapState(["goods"]),
    ...mapGetters(["ids"]),
    allprice() {
      var counts = 0;
      this.shopgoods.forEach(item => {
        counts += item.cou * item.sell_price;
      });
      return counts * 100;
    }
  }
};
</script>
<style  lang=less>
.box{
overflow: hidden;
.mss{
  margin-top: 100px;
}
.van-card {
  text-align: left;
  .carddes {
    display: flex;
    justify-content: space-between;
    .cp {
      color: red;
    }
  }
}
.delete-button {
  height: 100%;
}
}

</style>